<template>
  <!--  登录容器-->
  <div class="from-login">
    <div class="slogan">
      <h2>期待你的加入</h2>
      <h2>我有故事你有酒吗</h2>
    </div>
    <div>
      <el-card class="box-card" >
        <h2 class="login-title">登录你的即时账号</h2>
        <div class="register" style="display: flex; align-items: center"><span>没有账号？</span>
          <el-link type="primary" style="font-size: 16px" @click="toRegister">免费注册</el-link>
        </div>
        <el-form ref="form"  :model="userInfo" :rules="rules" style="width: 300px">
          <el-form-item prop="username" style="">
          <el-input prefix-icon="el-icon-user" v-model="userInfo.username" class="User" placeholder="请输入你的用户名" ></el-input>
          </el-form-item>
          <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" type="password" v-model="userInfo.password" class="User"
                    placeholder="请输入你的密码"></el-input>
          </el-form-item>
          <el-button type="primary" class="bt" @click="login('form')">登录</el-button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {

  name: 'Login',
  data() {
    return {
      userInfo:{
        username:'',
        password:''
      },
      rules:{
        username:[
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'},
    ]
      },
      bgSrc: require("../../public/img/Loginbg.jpg")
    }
  },
  methods: {
    //跳转注册页面
    toRegister() {
      this.$router.push({name: 'register'})
    },
    login(formName){
      this.$refs[formName].validate(async(valid)=>{
        if(valid){
          let date=await this.$api.userApi.userLogin({
            username:this.userInfo.username,
            password:this.userInfo.password
          })
          if(date.status===0){
            this.$message({
              message:'成功登录',
              type:'success'
            })
            console.log(date)
            window.localStorage.setItem('token',date.token)
            this.$store.commit('setUserInfo',{username:this.userInfo.username,userID:date.user_id})
            this.$router.push({name:'home'})
          }else{
            this.$message.error(date.message)
          }
        }
      })
    }
  },
  mounted() {
     axios({
       methods: "GET",
       url:'http://127.0.0.1:5000/user/userinfo',
       params:{id:"1"}
     }).then(value =>{
       console.log(value)
     })
  }
}
</script>
<style scoped>
.from-login {
  width: 100%;
  height: 100%;
  background: url("~@/../public/img/bg.jpg") no-repeat;
  background-size: cover;
}
.box-card {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  padding: 50px 0 20px 20px;
  position: absolute;
  top: 40%;
  left: 60%;
  transform: translateX(-50%) translateY(-50%);
}

.login-title {
  padding-bottom: 20px;
}

.User {
  margin-top: 20px;
}

.bt {
  width: 100%;
  margin-top: 30px;
  height: 50px;
  font-size: 16px;
}

.slogan {
  position: absolute;
  top: 20%;
  left: 25%;
  font-size: 30px;
  background: linear-gradient(135deg, #f7f7f7, #b9a0a0, #794747, #4e2020, #111111);
  color: transparent;
  -webkit-background-clip: text;
}
</style>